<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
  import AMap from 'AMap'
  import {Loading, XCircle} from 'vux'
  export default {
    components: {
      Loading,
      XCircle
    },
    data() {
      return {
        userInfo: null,
        finished: false,
        longitude: null,
        latitude: null,
        haveLocationed: false,
        excutioned: false,
        map: null,
        myMarker:null,
        pointCircle:null,
        attendPointMarker:null,
        polyLine: null,
        startMark: [],
        endMark: [],
      };
    },
    mounted() {
      this.startMark = this.$route.query.startMark
      this.endMark = this.$route.query.endMark
      this.$getUserInfo().then(userInfo => {
        this.map = new AMap.Map('container', {
          resizeEnable: true,
          center: this.startMark,
          zoom: 13  ,
        });
        this.userInfo = userInfo
        var lineArr = [
          this.startMark,
          this.endMark
        ];
        this.polyLine = new AMap.Polyline({
          path: lineArr,          //设置线覆盖物路径
          strokeColor: "red", //线颜色
          strokeOpacity: 1,       //线透明度
          strokeWeight: 3,        //线宽
          strokeStyle: "solid",   //线样式
          strokeDasharray: [10, 5] //补充线样式
        });
        let startMark = new AMap.Marker({ //添加自定义点标记
          position: this.startMark, //基点位置
          offset: new AMap.Pixel(-17, -42), //相对于基点的偏移位置
          draggable: true,  //是否可拖动
          content: '<div class="marker-route marker-marker-bus-from-start"></div>'   //自定义点标记覆盖物内容
        });
        let endMark = new AMap.Marker({ //添加自定义点标记
          position: this.endMark, //基点位置
          offset: new AMap.Pixel(-17, -42), //相对于基点的偏移位置
          draggable: true,  //是否可拖动
          content: '<div class="marker-route marker-marker-bus-from-end"></div>'   //自定义点标记覆盖物内容
        });
        this.map.add(startMark);
        this.map.add(endMark);
        this.map.add(this.polyLine);

      });
    },
    methods: {
    }
  };
</script>
<style>
  html, body {
    margin: 0;
    padding: 0;
  }

  #container {
    height: 100%;
    width: 100%;
    position: fixed;
  }

  .amap-marker .marker-route {
    position: absolute;
    width: 40px;
    height: 44px;
    color: #e90000;
    background: url(https://webapi.amap.com/theme/v1.3/images/newpc/poi-1.png) no-repeat;
    cursor: pointer;
  }
  .amap-marker .marker-marker-bus-from-end {
    background-position: -334px -130px;
  }
  .amap-marker .marker-marker-bus-from-start {
    background-position: -334px -180px;
  }
</style>
